<html>
<head>

<meta charset="UTF-8">
<title>事件</title>
<style type="text/css">
    #container{
        width: 100px;
        height: 80px;
        border: 1px solid rgb(255,0,0);
    }
</style>
</head>
<body>

<!--<div id="container" onmouseover="changeBackgroundColor()">-->
<div id="container">
</div>
<button type="button"  onclick="removeDivListener()">解除事件监听</button>

<table border=0 cellspacing=0 cellpadding=0>
    <tr>
        <td id="a">Q</td>
    </tr>
    <tr>
        <td id="b">W</td>
    </tr>
    <tr>
        <td id="c">E</td>
    </tr>
    <tr>
        <td id="d">A</td>
    </tr>
</table>
</body>
<script type="text/javascript">

    let myfunction = function(){
        let jsonStr = "{\"a\":\"内容baidu1\", \"b\":\"内容2\",\"c\":\"内容3\",\"d\":\"内容4\"}";
        let jsonObj = eval("(" + jsonStr + ")");
        for(let property in jsonObj){
            let nodeObj = document.getElementById(property);
            if(nodeObj)
                nodeObj.childNodes[0].nodeValue = jsonObj[property];
        }
    }


    function changeBackgroundColor() {
        // 选中对应的元素
        let div = document.querySelector("#container") ;

        myfunction()
    }
    let div = document.querySelector("#container") ;

    // div.addEventListener( 事件名称 , 具体的执行动作 ) ;
    div.addEventListener( "click" , myfunction) ;

    function removeDivListener() {
        div.removeEventListener( "click" , myfunction) ;
    }
</script>

</html>